<template>
  <div class="main">
    <CategoryHeader @goBookPage="goBookPage"></CategoryHeader>
    <div class="con">
      <div class="title"> {{this.categoryData.cur.title }} </div>
      <pre class="con-pre">
        {{ this.categoryData.cur.content | replaceUnnessaryBlank }}
      </pre>
    </div>
    <div class="opr" v-if="!loading">
      <van-button plain @click="goPreCategory" :disabled="this.categoryData.cur === null ">上一章</van-button>
      <van-button plain @click="goBookPage">章节目录</van-button>
      <van-button plain @click="goNextCategory" :disabled="this.categoryData.cur === null" >下一章</van-button>
    </div>
    <div class="fix-opr">
      <!-- 上一章 -->
      <div class="s-opr-tool pre" @click="goPreCategory" :class="[fixOprShink ? 'fix-opr-shink' : '']">
        <van-icon name="arrow-up" class="icon"/>
        <span class="text">上一章</span>
      </div>
      <!-- 下一章 -->
      <div class="s-opr-tool next" @click="goNextCategory" :class="[fixOprShink ? 'fix-opr-shink' : '']">
        <van-icon name="arrow-down" class="icon"/>
        <span class="text">下一章</span>
      </div>
    </div>
    <!-- <Footer></Footer> -->
  
  </div>
</template>
<script>
import CategoryHeader from '@/components/CategoryHeader'
// import Footer from '~/components/Footer'
import { Dialog ,Notify } from 'vant';

export default {

  async asyncData(ctx) {
    try{
      let bookId = ctx.query.bookId
      let bookName = ctx.query.bookName
      let categoryId = ctx.query.categoryId
      let categoryData = {}
      if(bookId && categoryId){
        categoryData = await ctx.$axios.get(`/api/category/${bookId}/${categoryId}`)
        // 统计浏览量
        ctx.$axios.get(`/api/addCategoryPvById?bid=${bookId}&cid=${categoryId}`)
      }else{
        Dialog.alert({
          message:'书籍id或章节id不存在，页面将跳转至首页',
          beforeClose:(action,done)=>{
            ctx.redirect('/')  
            done()
          }
        })
      }
      
      return {
        bookId,
        bookName,
        categoryId,
        categoryData
      }
    }catch(err){
      ctx.$errorHandler(err)
    }
  },
  name:'Category',
  components:{
    CategoryHeader,
    // Footer
  },
  data(){
    return {
      bookId:this.$route.query.bookId,
      bookName:this.$route.query.bookName,
      categoryId:this.$route.query.categoryId,
      categoryData:{
        pre:null,
        cur:{},
        next:null
      },
      loading:true,
      fixOprShink:false
    }
  },
  head() {
    let {pre,cur,next} = this.categoryData
    let content = cur.title + ','+ (pre ? pre.title : '') + ',' + (next ? next.title : '' )
    return {
      meta:[
        {
          hid:'keywords',
          name:'keywords',
          content:content
        }
      ]
    } 
  },
  
  filters:{
    replaceUnnessaryBlank(val){
      // 删除多余的空白
      if(val){
        return  val.replace(/^(\r?\n)+/,'').replace(/(\r?\n)+$/,'').replace(/(\r?\n)+/g,'\r\n\r\n')
      }else{
        return val
      }
    }
  },
  mounted() {
    this.loading = false
    // 友盟统计
    uMengTj('章节页','浏览',this.categoryData.title)
    setTimeout(() => {
      this.fixOprShink = true
    }, 2000);
    this.savePageData()    
  },
  methods: {
    initData(){
      this.bookId = this.$route.query.bookId
      this.categoryId = this.$route.query.categoryId
      this.categoryData={
        pre:null,
        cur:{},
        next:null
      }
    },
    savePageData(){
      // 记住这次访问的
      this.commonData.savePageHistroy(this.commonData.categoryPageHistoryKey,{
        bookName: encodeURIComponent(this.bookName),
        categoryName: encodeURIComponent(this.categoryData.cur.title),
        path:encodeURIComponent(this.$route.fullPath)
      })
    },
    async getCategorySelf(){
      this.categoryData = await this.$axios.get(`/api/category/${this.bookId}/${this.categoryId}`)
      this.loading = false
    },
     goPreCategory(){
      if(this.categoryData.pre){
        let query = { bookId:this.bookId, categoryId: this.categoryData.pre.id}
        this.$router.push({ path: '/category', query:query})
      }else{
        Notify({type:'danger',message:'已经是第一章了'})
      }
      
    },
    goNextCategory(){
      if(this.categoryData.next){
        let query = { bookId:this.bookId, categoryId: this.categoryData.next.id}
        this.$router.push({ path: '/category', query:query})
      }else{
        Notify({type:'danger',message:'已经是最后一章了'})
      }
    },
    goBookPage(){
      // 跳到书籍详情页
      this.$router.push({path: '/book',query: { bookId : this.bookId}})
    },
  },
  beforeRouteUpdate(to,from, next){
    this.loading = true
    next()
    setTimeout(()=>{
      this.initData()
      this.getCategorySelf()
      // 记住这次访问的
      this.savePageData()
    },0)
  }
}
</script>
<style lang="scss" scoped>
.main{
  padding-bottom: 10px;;
  .con{
    padding:64px 10px 20px;
    box-sizing: border-box;
    margin:auto;
    font-size: 16px;
    line-height: 30px;

    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
    .con-pre{
      white-space: pre-line;
      text-align: left;
      word-wrap: break-word;
    }
  }
  .opr{
    margin-top:10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
  }
  .fix-opr{
    position: fixed;
    right: 20px;
    bottom: 60px;
    .s-opr-tool{
      position: relative;
      height: 44px;
      width:104px;
      font-size: 16px;
      border-radius: 44px;
      background: white;
      box-shadow: 1px 1px 10px 0px #e8e8e8;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      transition: width 1s ease 2s;
      padding:0px 14px;
      box-sizing: border-box;
      .icon{
        // text-align: center;
      }
      .text{
        display: inline-block;
        width: 60px;
        overflow: hidden;        
        word-break: keep-all;
        text-align: center;
        transition: all 1s ease 2s;
        
      }
      &.fix-opr-shink{
        width:44px;
        .text{
          width: 0px;
          display: inline-block;
          padding:0px;
        }
      }
    }
  }
}
</style>